<script setup lang="ts">
import { ref, reactive, defineProps, watch } from 'vue'
import { ElMessage } from 'element-plus'

const dialogVisible = ref(false)
const emits = defineEmits(['close'])
const closeDialog = () => {
    emits('close', false)
}
const props = defineProps({
    isShow: {
        type: Boolean,
        default: false
    }
})
const formInline = reactive({
    email: '',
})

const rules = {
    email: [
        { required: true, message: '请输入Email地址', trigger: 'blur' },
    ],
}

const onSubmit = (formEl) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            ElMessage.success('发送确认邮件成功')
            dialogVisible.value = false
        } else {
            // ElMessage.error('请修正表单中的错误')
        }
    })
}

watch(() => props.isShow, (val) => {
    dialogVisible.value = val
}, { immediate: true })
</script>

<template>
    <el-dialog
    v-model="dialogVisible"
    title="账户邮箱"
    width="520"
    @close="closeDialog"
    >
        <div class="dialog-form">
            <el-form :model="formInline" :rules="rules" ref="formRef" label-width="130px">
                <el-form-item label="Email地址：" prop="email">
                    <el-input v-model="formInline.email" placeholder="请输入" style="width: 225px"/>
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
        <div class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="onSubmit($refs.formRef)">
                发送确认邮件
            </el-button>
        </div>
    </template>
    </el-dialog>
</template>

<style scoped lang='scss'>
    .forget-password{
        line-height: 1.4;
        margin-left: 20px;
    }
</style>